<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>

  <style>
    .title{
      font-size: 50px;
      color: red;
    }
  </style>

</head>
<body>
<div id="app">
<!--    <h2 v-bind:style="{key(CSS的属性名):value(CSS的属性值)}">{{message}}</h2>-->

  <h2 v-bind:style="{fontSize: '50px'}">{{message}}</h2>
<!--  这里的50px必须加上双引号，但是这样也还是写死的，如果不加双引号是当成一个变量去解析-->

  <h2 v-bind:style="{fontSize: finalSize}">{{message}}</h2>
<!--  这里在value的位置直接加变量名-->

  <h2 v-bind:style="{fontSize: finalSize1 + 'px', color: finalColor}">{{message}}</h2>

  <h2 v-bind:style="getStyle()">{{message}}</h2>

</div>

<script src="../js/vue.js"></script>
<script>
    const vue = new Vue({
        el:'#app',
        data:{
            message:'你好呀',
            finalSize:'100px',
            finalSize1:100,
            finalColor:'red',
        },
        methods:{
          getStyle:function () {
            return{fontSize: this.finalSize1 + 'px', color: this.finalColor}
          }
        }
    })
</script>
</body>
</html>